<template>
    <div>
        <Menu mode="horizontal" :theme="theme1" active-name="1">

            <MenuItem name="1">
                <div class="main">
                    <router-link to="/index"> My Site</router-link>
                </div>
            </MenuItem>

          <MenuItem name="1">
            <div class="main">
              <Icon type="ios-contact" />
              <router-link to="/articles">文章</router-link>
            </div>
          </MenuItem>

            <MenuItem v-for="item in menu" :name="item.name" :key="item.name">
                <router-link :to="item.src">
                    {{item.name}}
                </router-link>
            </MenuItem>

            <MenuItem name="2">
                <Dropdown v-if="userBtn">
                    <a href="javascript:void(0)">
                        用户:{{username}}
                        <Icon type="arrow-down-b"></Icon>
                    </a>
                    <Dropdown-menu slot="list">
                        <Dropdown-item>
                            <div v-on:click="goUrl('/userInfo/'+username)">个人信息</div>
                        </Dropdown-item>
                        <Dropdown-item>
                            <div v-on:click="goUrl('/collection')">我的收藏</div>
                        </Dropdown-item>
                        <Dropdown-item>
                            <div v-on:click="exit">退出</div>
                        </Dropdown-item>
                      <Dropdown-item v-if="isAdmin">
                        <div v-on:click="goUrl('/admin')">管理员列表</div>
                      </Dropdown-item>
                    </Dropdown-menu>
                </Dropdown>
                <router-link v-if="!userBtn" :to="{ path: '/login'}">登录</router-link>
            </MenuItem>
        </Menu>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data() {
            return {
                menu: [],
                theme1: 'dark',
                userBtn: false,
                username: '',
                isAdmin: false,
            }
        },
        created() {
            //获取导航菜单
            setInterval(() => {
                //console.log("轮询")
                //    获取用户Token是否存在
                if (sessionStorage.getItem('token')) {
                    this.userBtn = true
                    this.username = sessionStorage.getItem('username')
                  if(this.username == 'admin'){ //判断是不是管理员
                    this.isAdmin = true;
                  }
                } else {
                    this.userBtn = false
                }
            }, 100)
        },
        updated() {

        },
        methods: {
            //用户退出
            exit() {
                console.log(sessionStorage.getItem('token'))
                sessionStorage.removeItem('token')
                console.log(sessionStorage.getItem('token'))
              this.$router.push('/login')
            },
            goUrl(url) {
                this.$router.push({path: url})
            },
        }
    }
</script>

<style scoped>
    a {
     color:rgb(255,255,255);
    }
</style>